<span #contentProjection><ng-content></ng-content></span>
<span
  *ngIf="!showDot && !hasContent"
  class="devui-badge-count devui-badge-count-{{ status }}"
  [style.background]="bgColor"
  [style.color]="textColor"
>
  {{ count }}
</span>
<span *ngIf="showDot && !hasContent" class="devui-badge-status devui-badge-status-{{ status }}"></span>
<span
  *ngIf="hasContent"
  class="devui-badge-content devui-badge-content-{{ status }} devui-badge-content-{{ position }}"
  [style.background]="bgColor"
  [style.color]="textColor"
  [style.right.px]="offset && offset[0] ? -offset[0] : null"
  [style.top.px]="offset && offset[1] ? offset[1] : null"
  [ngClass]="{ 'devui-badge-content-count': !showDot, 'devui-badge-content-dot': showDot }"
>
  <ng-container *ngIf="!showDot && parseCountToNumber() <= maxCount">{{ count }}</ng-container>
  <ng-container *ngIf="!showDot && parseCountToNumber() > maxCount">{{ maxCount }}+</ng-container>
</span>
